{% extends "orga/mails/base.html" %}

{% load i18n %}
{% load static %}

{% block extra_title %}{% translate "Email editor" %} :: {% endblock extra_title %}

{% block mail_content %}
    <script defer src="{% static "common/js/tabs.js" %}"></script>
    <form method="post" class="form-with-placeholder">
        {% csrf_token %}
        <div class="mb-2">
            <h2 class="d-inline">
                {% block email_editor_title %}
                    {% translate "Email editor" %}
                {% endblock email_editor_title %}
            </h2>
            <h3 class="d-inline ml-1">
                <small class="text-muted">
                    {% block email_editor_title_detail %}{% endblock email_editor_title_detail %}
                </small>
            </h3>
            {% include "common/forms/errors.html" %}
        </div>
        <div id="placeholder-neighbour">
            <div role="tablist">
                <input role="tab" type="radio" id="tab-recipients" name="tablist" aria-controls="tabpanel-recipients" aria-selected="true" checked>
                <label for="tab-recipients">{% translate "Recipients" %}</label>

                <input role="tab" type="radio" id="tab-content" name="tablist" aria-controls="tabpanel-content" aria-selected="false">
                <label for="tab-content">{% translate "Content" %}</label>
            </div>

            <section id="tabpanel-recipients" role="tabpanel" aria-labelledby="tab-recipients" tabindex="0" aria-hidden="false">
                <fieldset>
                    {% block recipient_form %}{% endblock recipient_form %}
                    <details class="card">
                        <summary class="card-header">{% translate "Advanced settings" %}</summary>
                        <div class="card-body">
                            {% block advanced_recipient_form %}
                                {{ form.reply_to.as_field_group }}
                                {{ form.bcc.as_field_group }}
                            {% endblock advanced_recipient_form %}
                        </div>
                    </details>
                </fieldset>
            </section>

            <section id="tabpanel-content" role="tabpanel" aria-labelledby="tab-content" aria-hidden="true">
                <fieldset>
                    {{ form.subject.as_field_group }}
                    {{ form.text.as_field_group }}
                </fieldset>
            </section>
            <div class="col col-md-2" id="placeholder-column">
                <legend>{% translate "Placeholders" %}</legend>

                {% include "orga/mails/_placeholder_group.html" with placeholders=form.grouped_placeholders.submission tag="submission" %}
                {% include "orga/mails/_placeholder_group.html" with placeholders=form.grouped_placeholders.slot tag="slot" %}
                {% include "orga/mails/_placeholder_group.html" with placeholders=form.grouped_placeholders.user tag="user" %}
                {% include "orga/mails/_placeholder_group.html" with placeholders=form.grouped_placeholders.event tag="event" %}
                {% include "orga/mails/_placeholder_group.html" with placeholders=form.grouped_placeholders.other tag="other" %}
            </div>
        </div>

        {% block email_editor_preview %}
            {% if request.method == "POST" %}
                <fieldset class="mt-4">
                    <legend id="preview">{% translate "Email preview" %}</legend>
                    <div class="alert alert-info">
                        {% blocktranslate trimmed with count=mail_count %}
                            Roughly {{ count }} emails will be generated.
                        {% endblocktranslate %}
                    </div>
                    {% if form.warnings %}
                        <div class="alert alert-warning">
                            <span>
                                {% blocktranslate trimmed %}
                                    You have placeholders in your email that are either not valid or not valid for every email!
                                {% endblocktranslate %}
                                <ul>
                                    {# &#123; is the HTML entity for {, which would break django template syntax #}
                                    {% for w in form.warnings %}<li>&#123;{{ w }}}</li>{% endfor %}
                                </ul>
                                {% blocktranslate trimmed %}
                                    Emails where placeholders are invalid will <strong>not</strong> be created!
                                    For example, if you are using {session_room}, but some proposals don’t have a room yet, only emails for proposals with a scheduled room will be created.
                                {% endblocktranslate %}
                            </span>
                        </div>
                    {% endif %}
                    <div class="tab-pane mail-preview-group">
                        {% for locale, out in output.items %}
                            <div lang="{{ locale }}" class="mail-preview">
                                <strong>{{ out.subject|safe }}</strong>
                                <br>
                                <br>
                                {{ out.html|safe }}
                            </div>
                        {% endfor %}
                    </div>
                </fieldset>
            {% endif %}
        {% endblock email_editor_preview %}

        {% block skip_queue %}
            {% if form.skip_queue and request.method == "POST" %}
                <hr />
                {{ form.skip_queue.as_field_group }}
            {% endif %}
        {% endblock skip_queue %}

        {% block email_editor_actions %}
            <div class="submit-group mt-3">
                <span></span>
                <span>
                    <button type="submit" class="btn btn-lg btn-outline-info btn-save mr-2" name="action" value="preview">
                        {% translate "Preview email" %}
                    </button>
                    {% if request.method == "POST" %}
                        <button type="submit" class="btn btn-lg btn-success">
                            {% block send_button_label %}
                                {% translate "Send to outbox" %}
                            {% endblock send_button_label %}
                        </button>
                    {% endif %}
                </span>
            </div>
        {% endblock email_editor_actions %}
    </form>

    <script src="{% static "orga/js/placeholder.js" %}" defer></script>
{% endblock mail_content %}
